<template>
    <div>
        <div id="novelView" :key="count" style="height: 80vh;" />
    </div>
</template>


<script setup lang="ts">
import { onMounted, ref, watch } from 'vue';
import { useNWStore } from '@/stores/nwStore'
import { debounce } from '@/util/util.js'
import ePub from 'epubjs';

const nwStore = useNWStore()

const count = ref(0)

onMounted(
    () => {
        mountBook()
    }
)

watch(
    () => nwStore.novel,
    () => {
        count.value++
        mountBook()
    });



const mountBook = debounce(
    async () => {
        if (nwStore.novel === null) return

        if (nwStore.prop.nid !== 'local') {
            const url = nwStore.novel.src + nwStore.prop.chapterName;
            nwStore.book = ePub(url);
        } else {
            nwStore.book = ePub(nwStore.prop.chapterName);
        }

        count.value++;
        nwStore.rendition = nwStore.book.renderTo("novelView", {
            width: '95vw',
            height: '80vh',
        })
        nwStore.rendition.display();
    }
)
</script>


<style scoped>
#novelView {
    margin: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    background-color: white;
}
</style>